<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>{{lebelWord[meetType]}}请批详情</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div v-if="detailOption">
          <div class="leave-body">
            <!--            状态： 发布人的 院长的 集体决策人员-->
            <div class="leave-list" v-if="Number(styleType) == 3 && myState">
              <div class="leave-list-l">
                <span>
                  我的批复
                </span>
                <div :style="{color:myState.status==1?'green':'red'}" class="leave-list-l-list left-box-list-i">
                  {{ signState[myState.status] }}
                  <viewerModle type="1" :imgSrc="myState.sign?myState.sign:''" v-if="myState.sign"></viewerModle>
                </div>
              </div>
              <div class="leave-list-l" v-if="myState.status==2">
                <span>驳回理由</span>
                <span>{{ myState.status == 2 ? myState.content : '无' }}</span>
              </div>
            </div>
            <!--            0待审核1会议通过2会议驳回3园长通过4园长驳回-->
            <div class="leave-list">
              <div class="leave-list-l">
                <span>
                  园长批复
                </span>
                <span :style="{color:detailOption.status==3?'green':'red'}"
                      v-if="detailOption.status==3 || detailOption.status==4">
{{ detailOption.status ? examingUser[detailOption.status] : '' }}
                </span>
                <span style="color:red" v-else>
                  待审批
                </span>
              </div>
              <div class="leave-list-l" v-if="detailOption.status == 4">
                <span>驳回理由</span>
                <span>{{ detailOption.status == 4 ? detailOption.reject_content : '' }}</span>
              </div>
            </div>
            <div class="leave-list">
              <div class="leave-list-l">
                <span>请批人</span>
                <span>{{ detailOption.user ? detailOption.user.realname : '--' }}</span>
              </div>
              <div class="leave-list-l">
                <span>请批时间</span>
                <span>{{ detailOption.create_time || '' }}</span>
              </div>
            </div>
            <div class="leave-list">
              <div class="leave-list-l" v-if="meetType!==2">
                <span>{{lebelWord[meetType]}}用途</span>
                <span>{{ detailOption.purpose }}</span>
              </div>
              <div class="leave-list-l" v-else>
                <span>{{lebelWord[meetType]}}文件名</span>
                <span>{{ detailOption.purpose }}</span>
              </div>
              <div class="leave-list-l">
                <span>{{lebelWord[meetType]}}周期</span>
                <span>{{ detailOption.cycle }}</span>
              </div>
            </div>
            <div class="leave-list" v-if="Number(meetType)==1">
              <div class="leave-list-l">
                <span>{{lebelWord[meetType]}}频次</span>
                <span>{{ detailOption.number }}</span>
              </div>
              <div class="leave-list-l">
                <span>费用金额</span>
                <span>{{ detailOption.money }}</span>
              </div>
            </div>
            <div class="leave-list">
              <div class="leave-list-l">
                <span>{{lebelWord[meetType]}}用途说明</span>
                <span>{{ detailOption.content }}</span>
              </div>
              <div class="leave-list-l">
                <span>申请部门</span>
                <span>{{ detailOption.department ? detailOption.department.name : '' }}</span>
              </div>
            </div>
            <div class="leave-list" v-if="detailOption.is_meeting==1 && (Number(styleType)==1 || Number(styleType)==2)">
              <!--              stateType: 1, // 1 我的 2 园长 3 会议-->
              <!--              0 未确认 1 通过 2 驳回  signState -->
              <div class="leave-list-l">
                <span>集体决策人员</span>
                <div class="leave-list-l-list">
                  <p v-for="item in detailOption.sign" class="user-list">
                    <em class="user-list-title">{{ item.user ? item.user.realname : '' }}</em>
                    <!--                    在院长还没有审核不能看到每个人的状态-->
                    <!--                    园长审核了就可以-->
                    <em class="user-list-state" :class="{'success': item.status}"
                        v-if="Number(styleType)==1 && (detailOption.status!==3 && detailOption.status!==4)">
                      {{ !item.status ? '未确认' : '已确认' }}
                    </em>
                    <!--                    <em class="user-list-state" v-if="detailOption.status==3 || detailOption.status==4" :class="{'success': item.status}">-->
                    <!--                      {{ signState[item.status] }}-->
                    <!--                    </em>-->
                    <em class="user-list-state" :class="{'success': item.status==1}"
                        v-if="Number(styleType)==2 || (detailOption.status==3 || detailOption.status==4)">
                      {{ signState[item.status] }}
                    </em>
                    <em v-if="(Number(styleType)==2&& item.status==2) || (detailOption.status==3 || detailOption.status==4)">(理由：{{
                        item.content ? item.content : '无'
                      }})</em>
                    <!--                    <em class="user-list-sign" v-if="item.status==1" @click="signType=2,userSignPic=item.sign,autograghVisible=true">签名 <i class="el-icon-picture-outline"></i></em>-->
                    <viewerModle type="1" :imgSrc="item.sign?item.sign:''" v-if="item.sign"></viewerModle>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="file-get-box">
            <el-divider>{{lebelWord[meetType]}}用途说明文件</el-divider>
            <div v-if="">

            </div>
            <div v-for="(item, index) in fileList" :key="index" class="file-get-body">
              <p class="file-get-list">
                {{ index + 1 }}.
                <btn_file :option="item"></btn_file>
              </p>
              <span class="deteilSpan" @click="deteleFn(index,'fileList')" v-if="Number(styleType)==1">删除</span>
            </div>
            <uploadFileModle number="20" @getFile="getFile($event,'fileList')" ref="uploadFileModle" :sycnStatus="true"
                             fileType="interaction_add" :showfile="false" :fileListPush="getList"
                             v-if="Number(styleType)==1"></uploadFileModle>
          </div>
          <div class="file-get-box">
            <el-divider>会议记录</el-divider>
            <div v-for="(item, index) in logList" :key="index" class="file-get-body">
              <p class="file-get-list">
                {{ index + 1 }}.
                <btn_file :option="item"></btn_file>
              </p>
              <span class="deteilSpan" @click="deteleFn(index,'logList')" v-if="Number(styleType)==1">删除</span>
            </div>
            <uploadFileModle number="20" @getFile="getFile($event,'logList')" ref="uploadFileModle" :sycnStatus="true"
                             fileType="interaction_add" :showfile="false" :fileListPush="getlogList"
                             v-if="Number(styleType)==1"></uploadFileModle>
          </div>
          <div class="file-get-box">
            <el-divider>合同</el-divider>
            <div v-for="(item, index) in contractList" :key="index" class="file-get-body">
              <p class="file-get-list">
                {{ index + 1 }}.
                <btn_file :option="item"></btn_file>
              </p>
              <span class="deteilSpan" @click="deteleFn(index,'contractList')" v-if="Number(styleType)==1">删除</span>
            </div>
            <uploadFileModle number="20" @getFile="getFile($event,'contractList')" ref="uploadFileModle"
                             :sycnStatus="true"
                             fileType="interaction_add" :showfile="false" :fileListPush="contractList_file"
                             v-if="Number(styleType)==1"></uploadFileModle>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">取消</el-button>
        <el-button @click.native="submitFileFn" size="small" type="primary" plain v-if="Number(styleType)==1">修改新增文件并保存
        </el-button>
        <el-button @click.native="signType=1,autograghVisible=true" size="small" type="warning" plain
                   v-if="adminBtnState">签名
        </el-button>
        <el-button @click.native="checkApplyFn(1)" size="small" type="primary" plain
                   v-if="adminBtnState" :disabled="myState&&myState.status==1?true:false">通过
        </el-button>
        <el-button @click.native="checkApplyFn(2)" size="small" type="danger" plain
                   v-if="adminBtnState" :disabled="myState&&myState.status==2?true:false">驳回
        </el-button>
      </div>
    </div>
    <signUser :visible.sync="autograghVisible" @signFn="signFn" :userSignPic="userSignPic"
              :signType="signType"></signUser>
  </div>
</template>

<script>
import {
  approveDetail,
  approveDetail_advert,
  approveDetail_public,
  approve_metting_examine,
  approve_metting_examine_advert,
  approve_metting_examine_public,
  approve_admin_examine,
  approve_admin_examine_advert,
  approve_admin_examine_public,
  approveEdit,
  approveEdit_advert,
  approveEdit_public
} from '@/api/admin/approveApply'
import {mapGetters} from "vuex";
import signUser from "./signUser";

export default {
  props: ['visible', 'applyDetailId', 'styleType', 'meetType'],
  components: {signUser},
  data() {
    return {
      dialogVisible: this.visible,
      autograghVisible: false,
      signType: 1,
      infoForm: {
        department_id: '', // 	字符串 	必填 	1 	- 	部门id
        purpose: '', // // 	字符串 	必填 	1 	- 	业务用途
        cycle: '', // // 	字符串 	必填 	1 	- 	业务周期
        number: '', // // 	字符串 	必填 	1 	- 	次数
        money: '', // 	字符串 	必填 	1 	- 	金额
        content: '', // 	字符串 	必填 	1 	- 	说明
        file: '', // 	字符串 	必填 	1 	- 	文件
        metting: '', // 	字符串 	必填 	1 	- 	会议人员
        metting_file: '', // 	字符串 	必填 	1 	- 	会议文件
        contract: '', // 	字符串 	必填 	1 	- 	合同
        is_meeting: 0, // 	字符串 	必填 	1 	- 	是否需要会议
      },
      statusLineColor: {
        0: '#f44336',
        1: 'rgb(0 199 5)',
        2: '#f44336',
        3: 'rgb(207 122 0)',
        4: 'rgb(0 199 5)'
      },
      statusLine: {
        0: '待审批',
        1: '通过',
        2: '驳回',
        3: '请假中',
        4: '已完成'
      },
      signState: {
        0: '待确认',
        1: '已通过',
        2: '已驳回',
      },
      examingUser: {
        0: '待审核',
        1: '会议通过',
        2: '会议驳回',
        3: '园长通过',
        4: '园长驳回'
      },
      detailOption: null,
      fileList: [],
      getList: [],
      contractList: [], // 合同
      contractList_file: [],
      logList: [], // 记录
      getlogList: [],
      myState: null,
      stateExamin: false,
      adminBtnState: false, // 园长，会议员是否可审批状态
      userSignPic: '',
      lebelWord: {
        1: '业务',
        2: '公示',
        3: '文宣'
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      console.log('userInfo:', this.userInfo)
      if (this.visible) {
        this.InitFn()
      } else {
        this.detailOption = null
        this.fileList = []
        this.getList = []
        this.contractList = [] // 合同
        this.contractList_file = []
        this.logList = [] // 记录
        this.getlogList = []
        this.userSignPic = ''
      }
    }
  },
  created() {
  },
  methods: {
    signFn(option) {
      console.log('option:', option)
      this.userSignPic = option
    },
    submitFileFn() {
      console.log('fileList', this.fileList)
      console.log('contractList', this.contractList)
      console.log('logList', this.logList)
      let data_ = this.getJson(this.infoForm)
      data_.file = this.fileList ? JSON.stringify(this.fileList) : ''
      data_.metting_file = this.fileList ? JSON.stringify(this.logList) : ''
      data_.contract = this.fileList ? JSON.stringify(this.contractList) : ''
      // let state = 1
      // if(state){
      //   return
      // }
      data_.id = this.applyDetailId
      if (Number(this.meetType) === 1) {
        approveEdit(data_).then(res => {
          if (!res.code) {
            this.$message.success(res.msg)
            this.InitFn()
          } else {
            this.$message.error(res.msg)
          }
        })
      } else if (Number(this.meetType) === 1) {
        approveEdit_public(data_).then(res => {
          if (!res.code) {
            this.$message.success(res.msg)
            this.InitFn()
          } else {
            this.$message.error(res.msg)
          }
        })
      } else if (Number(this.meetType) === 1) {
        approveEdit_advert(data_).then(res => {
          if (!res.code) {
            this.$message.success(res.msg)
            this.InitFn()
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    deteleFn(index, option) {
      // option 1 说明文件 2 会议记录 3 合同
      let src_ = this[option][index].src
      let list = ''
      if (option === 'fileList') {
        list = 'getList'
      } else if (option === 'contractList') {
        list = 'contractList_file'
      } else if (option === 'logList') {
        list = 'getlogList'
      }
      if (this[list].length) {
        let index_ = 0
        for (let i in this[list]) {
          let item = this[list][i]
          if (item.src === src_) {
            index_ = i
          }
        }
        this[list].splice(index_, 1)
      }
      this[option].splice(index, 1)
    },
    getFile(option, type) {
      console.log('收到附件数据：', option, type)
      // type 1 说明文件 2 会议记录 3 合同
      // contractList: [], // 合同
      //     contractList_file: [],
      //     logList: [], // 记录
      //     getlogList: []
      let list = this.getJson(this[type])
      if (type === 'fileList') {
        this.getList = this.getJson(option)
      } else if (type === 'logList') {
        this.getlogList = this.getJson(option)
      } else if (type === 'contractList') {
        this.contractList_file = this.getJson(option)
      }
      if (option) {
        let url_ = []
        for (let item of list) {
          url_.push(item.src)
        }
        for (let item of option) {
          if (url_.indexOf(item.src) === -1) {
            this[type].push({
              name: item.name,
              src: item.src
            })
          }
        }
      }
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 初始化
    InitFn() {
      if (Number(this.meetType) === 1) {
        approveDetail({id: this.applyDetailId}).then(res => {
          if (res.vo.file) {
            this.fileList = JSON.parse(res.vo.file)
          }
          if (res.vo.contract) {
            this.contractList = JSON.parse(res.vo.contract)
          }
          if (res.vo.metting_file) {
            this.logList = JSON.parse(res.vo.metting_file)
          }
          for (let i in this.infoForm) {
            if (res.vo[i]) {
              this.infoForm[i] = res.vo[i]
            }
          }
          // myState stateType 1 我的 2 园长 3 会议
          // 是否会议 is_meeting
          let adminBtnState = true
          if (res.vo.is_meeting) {
            for (let item of res.vo.sign) {
              if (Number(this.styleType) == 3 && item.user_id === this.userInfo.id) {
                this.myState = this.getJson(item)
                this.userSignPic = item.sign
                if (res.vo.status === 3 || res.vo.status === 4) {
                  adminBtnState = false
                }
              }
              if (Number(this.styleType) == 2 && !item.status) {
                adminBtnState = false // 有一个没确认，园长就不可以审批
              }
            }
          }
          if (res.vo.status === 3 || res.vo.status === 4) {
            adminBtnState = false
          }
          if (Number(this.styleType) == 1) {
            adminBtnState = false
          }
          // 会议员在园长没审批之前都可以进行编辑
          // 园长只有会议员全部审批才可以审批
          console.log('lll:', this.myState)
          this.adminBtnState = adminBtnState
          // 会议评论 园长评论 stateExamin
          this.detailOption = res.vo
        })
      } else if (Number(this.meetType) === 2) {
        approveDetail_public({id: this.applyDetailId}).then(res => {
          if (res.vo.file) {
            this.fileList = JSON.parse(res.vo.file)
          }
          if (res.vo.contract) {
            this.contractList = JSON.parse(res.vo.contract)
          }
          if (res.vo.metting_file) {
            this.logList = JSON.parse(res.vo.metting_file)
          }
          for (let i in this.infoForm) {
            if (res.vo[i]) {
              this.infoForm[i] = res.vo[i]
            }
          }
          // myState stateType 1 我的 2 园长 3 会议
          let adminBtnState = true
          if (res.vo.is_meeting) {
            for (let item of res.vo.sign) {
              if (Number(this.styleType) == 3 && item.user_id === this.userInfo.id) {
                this.myState = this.getJson(item)
                this.userSignPic = item.sign
                if (res.vo.status === 3 || res.vo.status === 4) {
                  adminBtnState = false
                }
              }
              if (Number(this.styleType) == 2 && !item.status) {
                adminBtnState = false // 有一个没确认，园长就不可以审批
              }
            }
          }
          if (res.vo.status === 3 || res.vo.status === 4) {
            adminBtnState = false
          }
          if (Number(this.styleType) == 1) {
            adminBtnState = false
          }
          // 会议员在园长没审批之前都可以进行编辑
          // 园长只有会议员全部审批才可以审批
          console.log('lll:', this.myState)
          this.adminBtnState = adminBtnState
          // 会议评论 园长评论 stateExamin
          this.detailOption = res.vo
        })
      } else if (Number(this.meetType) === 3) {
        approveDetail_advert({id: this.applyDetailId}).then(res => {
          if (res.vo.file) {
            this.fileList = JSON.parse(res.vo.file)
          }
          if (res.vo.contract) {
            this.contractList = JSON.parse(res.vo.contract)
          }
          if (res.vo.metting_file) {
            this.logList = JSON.parse(res.vo.metting_file)
          }
          for (let i in this.infoForm) {
            if (res.vo[i]) {
              this.infoForm[i] = res.vo[i]
            }
          }
          // myState stateType 1 我的 2 园长 3 会议
          let adminBtnState = true
          if (res.vo.is_meeting) {
            for (let item of res.vo.sign) {
              if (Number(this.styleType) == 3 && item.user_id === this.userInfo.id) {
                this.myState = this.getJson(item)
                this.userSignPic = item.sign
                if (res.vo.status === 3 || res.vo.status === 4) {
                  adminBtnState = false
                }
              }
              if (Number(this.styleType) == 2 && !item.status) {
                adminBtnState = false // 有一个没确认，园长就不可以审批
              }
            }
          }
          if (res.vo.status === 3 || res.vo.status === 4) {
            adminBtnState = false
          }
          if (Number(this.styleType) == 1) {
            adminBtnState = false
          }
          // 会议员在园长没审批之前都可以进行编辑
          // 园长只有会议员全部审批才可以审批
          console.log('lll:', this.myState)
          this.adminBtnState = adminBtnState
          // 会议评论 园长评论 stateExamin
          this.detailOption = res.vo
        })
      }
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    checkApplyFn(option) {
      let that = this
      console.log(this.styleType)
      console.log(this.myState)
      console.log(this.userSignPic)
      if (Number(this.styleType) === 3) {
        if (!this.userSignPic) {
          this.$message.error('请签名再提交')
          return
        }
      }
      // 需要判断是否重复提交
      if (this.myState && Number(this.myState.status) === option) {
        this.$message.error('不可重复提交状态')
        return
      }
      if (!this.userSignPic) {
        this.$message.error('请签字确认')
        return
      }
      // let state = 1
      // if(state){
      //   return
      // }
      if (option === 1) {
        this.$confirm('确认通过请批，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.submitInfoFn(option)
        }).catch(() => {
        });
      } else {
        this.$prompt('驳回备注', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({value}) => {
          console.log('value:', value)
          that.submitInfoFn(option, value)
        }).catch(() => {
        });
      }
    },
    submitInfoFn(option, value) {
      // approve_metting_examine, approve_admin_examine
      // <!--              stateType: 1, // 1 我的 2 园长 3 会议-->
      if (Number(this.styleType) === 2) {
        // id 	字符串 	必填 	1 	- 	ID
        // type 	字符串 	必填 	1 	- 	类型1通过2驳回
        // content 	字符串 	必填 	1 	- 	原因
        // sign 	字符串 	必填 	1 	- 	签名
        if (Number(this.meetType) === 1) {
          approve_admin_examine({
            id: this.applyDetailId,
            type: option,
            content: value || '',
            sign: this.userSignPic
          }).then(res => {
            if (!res.code) {
              this.$message.success(res.msg)
              this.InitFn()
              this.$emit('InitFn')
            } else {
              this.$message.error(res.msg)
            }
          })
        } else if (Number(this.meetType) === 2) {
          approve_admin_examine_public({
            id: this.applyDetailId,
            type: option,
            content: value || '',
            sign: this.userSignPic
          }).then(res => {
            if (!res.code) {
              this.$message.success(res.msg)
              this.InitFn()
              this.$emit('InitFn')
            } else {
              this.$message.error(res.msg)
            }
          })
        } else if (Number(this.meetType) === 3) {
          approve_admin_examine_advert({
            id: this.applyDetailId,
            type: option,
            content: value || '',
            sign: this.userSignPic
          }).then(res => {
            if (!res.code) {
              this.$message.success(res.msg)
              this.InitFn()
              this.$emit('InitFn')
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      }
      if (Number(this.styleType) === 3) {
        if (Number(this.meetType) === 1) {
          approve_metting_examine({
            id: this.applyDetailId,
            type: option,
            content: value || '',
            sign: this.userSignPic
          }).then(res => {
            if (!res.code) {
              this.$message.success(res.msg)
              this.InitFn()
              this.$emit('InitFn')
            } else {
              this.$message.error(res.msg)
            }
          })
        } else if (Number(this.meetType) === 2) {
          approve_metting_examine_public({
            id: this.applyDetailId,
            type: option,
            content: value || '',
            sign: this.userSignPic
          }).then(res => {
            if (!res.code) {
              this.$message.success(res.msg)
              this.InitFn()
              this.$emit('InitFn')
            } else {
              this.$message.error(res.msg)
            }
          })
        } else if (Number(this.meetType) === 3) {
          approve_metting_examine_advert({
            id: this.applyDetailId,
            type: option,
            content: value || '',
            sign: this.userSignPic
          }).then(res => {
            if (!res.code) {
              this.$message.success(res.msg)
              this.InitFn()
              this.$emit('InitFn')
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      }
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 600px;
  height: 600px;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.resruitment-title {
  padding: 5px 0;
  border-bottom: 2px solid #abd3f3;
  margin-bottom: 20px;
}

.el-radio {
  margin-right: 20px;
}

.jobTime {
  display: flex;
  align-items: center;
}

.jobTime span {
  padding: 0 10px;
}

.leave-body {
  border: 1px solid #DCDFE6;
}

.leave-list {
  display: flex;
  border-bottom: 1px solid #DCDFE6;
}

.leave-list:last-child {
  border-bottom: none;
}

.leave-list-l {
  flex: 1;
  border-right: 1px solid #DCDFE6;
  display: flex;
}

.leave-list-l:last-child {
  border-right: none;
}

.leave-list-l span {
  padding: 10px;
}

.leave-list-l span:first-child {
  display: block;
  width: 78px;
  border-right: 1px solid #DCDFE6;
  padding: 10px;
}

.leave-list-l span:last-child {
  flex: 1;
}

.signBox {
  padding: 10px;
  text-align: center;
  color: #ddd;
}

.file-get-list {
  display: flex;
  padding: 5px;
  background: #eee;
  border-radius: 4px;
  align-items: center;
  flex: 1;
}

.file-get-body {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.deteilSpan {
  padding: 0 10px;
  font-size: 12px;
  cursor: pointer;
  color: red;
}

.leave-list-l-list {
  flex: 1;
}

.user-list {
  padding: 5px 10px;
  border-bottom: 1px #eee dashed;
  width: 100%;
}

.user-list:last-child {
  border-bottom: none;
}

.user-list em {
  font-style: normal;
}

.user-list em.user-list-state {
  font-size: 10px;
  color: red;
  border: 1px solid red;
  height: 16px;
  border-radius: 8px;
  margin-left: 10px;
  padding: 0 5px;
}

.user-list em.user-list-state.success {
  color: #1dc053;
  border: 1px solid #1dc053;
}

.user-list-sign {
  color: #0aa0ff;
  margin-left: 20px;
  cursor: pointer;
}

.user-list-sign:hover {
  text-decoration: underline;
}

.left-box-list-i {
  display: flex;
  align-items: center;
  padding-left: 10px;
}
</style>
